import React, { useEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
import Child3 from './components/child3'
/* 
useEffect(回调函数)  这个回调函数 相当于 didMount 和 didUpdate的结合体
useEffect(回调函数,[]) 这个回调函数 相当于 didMount
useEffect(回调函数,[a,b,c]) 这个回调函数  初始化时候 执行，然后 每当
                  a,b,c其中任意一个发生改变的时候 都会执行这个回调函数
                  我们一版把 a，b，c称为回调函数的依赖

useEffect(()=>{
  回调函数1

  return 回调函数2
})  每当回调函数1执行的时候 都会先去执行上一次回调函数1执行返回的回调函数2                  

*/
let a = 0;
function App() {
  let [count, setCount] = useState(100);
  let [count2, setCount2] = useState(100);
  let [count3, setCount3] = useState(100);
  let ref = useRef()
  // console.log(ref)
  /*  useEffect(() => {
     // 会在初始化或者 更新的时候执行
     // didMount 和 didUpdate的结合体
     console.log(ref.current)
     if (a++ == 0) {
       console.log('啥事不管哪')
     } else {
       console.log("干更新的操作")
     }
     console.log('componentDidMount+componentDidUpdate')
   })
   useEffect(() => {
     // 会在初始化的时候执行
     // didMount 
     console.log(ref.current)
     console.log('componentDidMount')
   }, [count]) */
  // useEffect(() => {
  //   console.log('初始化或者count2 3改变了')
  // }, [count2, count3])
  return <>
    <h1 ref={ref}>{count}---{count2}---{count3}</h1>
    <button onClick={() => { setCount(count + 1) }}>+</button>
    <button onClick={() => { setCount2(count2 + 1) }}>+</button>
    <button onClick={() => { setCount3(count3 + 1) }}>+</button>
    {/* {
      count % 2 ? <Child3 /> : null
    } */}
    <Child3 />
  </>
}

ReactDOM.render(<App />, document.getElementById('root'))